<div class="texture-examples">
  <div class="texture-examples-container">
    <h3>Legend</h3>

    <script>
      for (i = 1; i < 89; i++) {
        document.write('<div class="texture-' + i + '">')
          document.write('<h4>' + i + '</h4>')
          document.write('<div class="examples">')
            document.write('<div class="example-normal"></div>')
            document.write('<div class="example-inverted"></div>')
          document.write('</div>')
        document.write('</div>')
      }
    </script>

    <div class="instructions">
      <b>Instructions</b>
      <p>Each texture has two versions, shown in each box in the pattern; a normal version and an inverted one. Some versions work better on dark backgrounds, some on light. Switch between the two by changing between 0 and 1 for the final argument passed in the @include.</p>
      <p>The mixin can change background color – or gradient colors – for the texture, along with gradient angle.</p>
      <p>The two squares below is what will be rendered if you copy-paste the code. Use the numbers in the legend above to switch textures in the code. This is done by changing the texture number in the @include for .texture-normal or .texture-inverted. The default selection is texture number 67. Most of these textures are from <a href="http://subtlepatterns.com/">subtlepatterns.com</a></p>
    </div>
  </div>
</div>
